<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </Back>
    </div>
    <div class="form-content">
      <div class="form-box" style="width: 100%;">
        <el-tabs v-model="active" type="card">
          <el-tab-pane label="基础数据" name="base">
            <div style="width: 60%;margin: 0 auto;">
              <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入名称" clearable />
                </el-form-item>
                <el-form-item label="备注" prop="desc">
                  <el-input v-model="form.desc" placeholder="请输入描述" clearable />
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="功能权限" name="fun">
            <div style="width: 60%;margin: 0 auto;">
              <el-tree ref="treeRef" :data="authList" :props="{
            children: 'children',
            label: 'name',
            id: 'id'
          }" :default-checked-keys="authIds" node-key="id" show-checkbox highlight-current default-expand-all />
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
  </div>
</template>
<script setup name="AdminRoleDetail">
const { proxy } = getCurrentInstance()

const formRef = ref();
const form = reactive({ id: '', name: '', desc: '' });
const active = ref('base');

//验证规则
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
};
//保存
async function save() {
  let menuids = treeRef.value?.getCheckedNodes(false, false)
  let ids = []
  menuids.forEach(item => {
    ids.push(item.id)
    ids.push(item.parent)
  });
  ids = Array.from(new Set(ids));


  formRef.value.validate(async (valid) => {
    if (valid) {
      form.menu_ids = ids.join(',')
      let res = await proxy.$post('adminRoleSave', form)
      if (res.code === 0) {
        ElMessage({ type: 'success', message: '保存成功' });
        proxy.$bus.emit('back');
      }
    }
  });
}

onMounted(async () => {
  await getMenu()
  // 编辑
  let id = proxy.$route.query.id || null;
  if (id) {
    getDetail(id)
  }
});


async function getDetail(id) {
  let res = await proxy.$post('adminRoleDetail', {
    id
  }, false)
  if (res.code === 0) {
    authIds.value = res.data.menu_ids ? res.data.menu_ids.split(",") : []
    setCheckedKeys()
    authList.value.forEach(item => {
      if (authIds.value.indexOf(`${item.id}`) == -1) {
        treeRef.value?.setChecked(item.id, false, false)
      }
      if (item.children && item.children.length > 0) {
        item.children.forEach(subItem => {
          if (authIds.value.indexOf(`${subItem.id}`) == -1) {
            treeRef.value?.setChecked(subItem.id, false, false)
          }
          if (subItem.children && subItem.children.length > 0) {
            subItem.children.forEach(thrItem => {
              if (authIds.value.indexOf(`${thrItem.id}`) == -1) {
                treeRef.value?.setChecked(thrItem.id, false, false)
              }
              if (thrItem.children && thrItem.children.length > 0) {
                thrItem.children.forEach(fourItem => {
                  if (authIds.value.indexOf(`${fourItem.id}`) == -1) {
                    treeRef.value?.setChecked(fourItem.id, false, false)
                  }
                })
              }

            })
          }

        })
      }

    })


    Object.assign(form, res.data);
  }
}

const authList = ref([]);
const authIds = ref([])
async function getMenu() {
  let res = await proxy.$get('adminMenuList', {}, false)
  if (res.code === 0) {
    authList.value = res.data.list || []
  }
}


const treeRef = ref(null)
const setCheckedKeys = () => {
  treeRef.value?.setCheckedKeys(authIds.value, false)
}
</script>
<style scoped lang="scss"></style>
